<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-08-29 15:34:18
 * @LastEditTime: 2023-10-17 15:55:38
-->
<template>
    <div class="t1">
        <div v-for="(item, index) in timeNavList" v-bind:key="item">
            <div class="t2" @click="select(item, index)"
                :class="defaultClicks == item ? index == 0 ? 'select1' : index == length - 1 ? 'select3' : 'select2' : index != length - 1 && 'line'">
                {{ item }}
            </div>
        </div>
    </div>
</template>
    
<script>

export default {
    name: 'TimePageNavList',
    emits: ['returnData'],
    components: {
    },
    props: {
        timeNavList: Array,
        defaultClick: String
    },
    data() {
        return {
            defaultClicks: this.defaultClick,
            length:this.timeNavList.length
        }
    },
    mounted() {

    },
    methods: {
        select(name, index) {
            this.defaultClicks = name
            this.$emit('returnData', index)
        }
    },
    watch: {

    },
    computed: {
    }
}
</script>

<style scoped>
.t1 {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 30px;
    background: white;
    height: 24px;
}

.t2 {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: black;
    justify-content: center;
    padding: 4px 20px;
    white-space: nowrap;
}

.select3 {
    background-color: #6698ff;
    border-radius: 0px 30px 30px 0px;
    color: white;
}

.select2 {
    background-color: #6698ff;
    color: white;
}

.select1 {
    background-color: #6698ff;
    border-radius: 30px 0px 0px 30px;
    color: white;
}

.line {
    border-right: 1px solid #eee;
}
</style>